import React from 'react';
import {
    MenuFoldOutlined,
    MenuUnfoldOutlined,
    UserOutlined,
    ExclamationCircleFilled
} from '@ant-design/icons';
import { Button, Layout, Menu, theme, Modal } from 'antd';

import { useState, useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { Link } from 'react-router-dom'
import { useHistory, useLocation } from 'react-router-dom';

// 导入用户信息接口
import { getUserInfo } from '@/api/dashboard.js';
// 导入二级路由组件配置组件 (坑)
import Main from '@/router/Main';

//以内组件样式
import '@/assets/css/dashboard.css';

const { Header, Sider, Content } = Layout;


const Dashboard = () => {
    // 是否折叠左侧菜单栏
    const [collapsed, setCollapsed] = useState(false);
    const [userinfo, setUserinfo] = useState({});
    //获取主题
    const {
        token: { colorBgContainer },
    } = theme.useToken();


    // 渲染左侧菜单项
    //第一步: 获取redux 中的左侧菜单栏
    const { acl } = useSelector(state => state)
    // console.log(acl);
    // 第二步: 改造数组
    // [
    //     {
    //         key: '1',
    //         icon: <UserOutlined />,
    //         label: 'nav 1',
    //     },
    //     {
    //         key: '2',
    //         icon: <VideoCameraOutlined />,
    //         label: 'nav 2',
    //         children: [
    //             {
    //                 key,
    //                 icon,
    //                 children,
    //                 label,
    //                 type,
    //             }
    //         ]
    //     }
    // ];
    const items = [];
    function getItem(label, key, icon, children, type) {
        return {
            key,
            icon,
            children,
            label,
            type,
        };
    };

    acl.map(item => {
        if (item.children.length != 0) {
            // 有二级菜单
            items.push(getItem(item.auth_name, item.auth_path, <MenuFoldOutlined />, item.children.map(v => {
                if (v.is_nav == 1) {
                    return getItem(<Link to={v.auth_path}>{v.auth_name}</Link>, v.auth_path, <UserOutlined></UserOutlined>)
                }
            })))
        } else {
            // 没有二级菜单
            items.push(getItem(<Link to={item.auth_path}>{item.auth_name}</Link>, item.auth_path, <MenuFoldOutlined />))
        }

    })

    // console.log('items', items);

    // 获取用户信息
    useEffect(() => {
        getUserInfo().then(res => {
            console.log('用户信息', res);
            setUserinfo(res.data.accountInfo)
        })
    }, []);

    //注销登录
    const { confirm } = Modal;
    const his = useHistory()
    const loginOut = () => {
        // 显示一个确认提示框
        confirm({
            title: '提示!!!',
            icon: <ExclamationCircleFilled />,
            content: '确认要退出吗?',
            onOk() {
                console.log('OK');
                // 01: 清除本地的登录时的储存信息
                localStorage.removeItem('persist:root')
                localStorage.removeItem('jwt')
                // 02: 返回登录页
                setTimeout(() => {
                    his.push('/login')
                }, 500)

            },
            onCancel() {
                console.log('Cancel');
            },
        });

    }


    // 设置默认打开项
    // 获取当前的页面的路径
    const loc = useLocation()
    // console.log('loc.pathname', loc.pathname);
    // console.log(loc.pathname.substring(0, loc.pathname.lastIndexOf('/')))
    // 默认打开的菜单项,因为设置的key 为 当前的path, 所以设置key 时, 只需要获取当前的路径path
    // 然后打开是一级菜单, 对当前获取到的二级路径进行截取取到一级路径就可以了
    const defaultOpenKeys = [loc.pathname.substring(0, loc.pathname.lastIndexOf('/'))]
    // 设置默认选中的项, 当前路径对应的path对应的哪一个菜单,就选中哪一个菜单, 所以
    // 获取当前的路径path, 就可以
    const defaultSelectedKeys = [loc.pathname]
    return (
        <Layout>
            <Sider trigger={null} collapsible collapsed={collapsed}>
                <div className="logo" />
                <Menu
                    theme="dark"
                    mode="inline"
                    defaultSelectedKeys={defaultSelectedKeys}
                    defaultOpenKeys={defaultOpenKeys}
                    items={items}
                />
            </Sider>
            <Layout className="site-layout">
                <Header
                    style={{
                        padding: 0,
                        background: colorBgContainer,
                        display: 'flex',
                        justifyContent: 'space-between',
                        alignItems: 'center'
                    }}
                >
                    {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
                        className: 'trigger',
                        onClick: () => setCollapsed(!collapsed),
                    })}

                    {/*  */}
                    <p style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                        <span>您好,2214班级{userinfo.role}: {userinfo.username}</span>
                        <Button onClick={loginOut}>注销登录</Button>
                    </p>

                </Header>
                <Content
                    style={{
                        margin: '24px 16px',
                        padding: 24,
                        minHeight: 280,
                        background: colorBgContainer,
                        overflow: 'auto'
                    }}
                >
                    {/* 设置路由匹配后的坑 */}
                    <Main></Main>

                </Content>
            </Layout>
        </Layout>
    );
}

export default Dashboard;
